<template>
    <!-- 视图部分 -->
    <div>
        <!-- <van-steps :active="active" @click-step="changeTab"> -->
        <LRheader :center="center"></LRheader>
        <div class="setmargin">
            <van-steps :active="active" @click-step="changeTab" active-color="#38f">
            <van-step>周期</van-step>
            <van-step>偏好</van-step>
            <van-step>洲</van-step>
            <van-step>国家</van-step>
            <van-step>城市</van-step>
            <van-step>预算</van-step>
            <van-step>信息</van-step>
        </van-steps>
        <Period v-if= "'Period' == this.stack[this.active]"></Period>
        <Prefer v-if= "'Prefer' == this.stack[this.active]"></Prefer>
        <States v-show= "'States' == this.stack[this.active]" :active='active'></States>
        <Country v-show= "'Country' == this.stack[this.active]"></Country>
        <City v-if= "'City' == this.stack[this.active]"></City>
        <Budget v-if= "'Budget' == this.stack[this.active]"></Budget>
        <Information v-if= "'Information' == this.stack[this.active]"></Information>
        <!-- <router-view></router-view> -->
        <van-button round type="info" plain @click="nextPage" color="#455357" v-show="active<6?true:false">下一步</van-button>
    </div>
    </div>
    
</template>

<script>

import Vue from 'vue';
import { Step, Steps, Icon } from 'vant';
import Period from "@/components/Nav/period"
import Prefer from "@/components/Nav/prefer"
import States from "@/components/Nav/states"
import Country from "@/components/Nav/country"
import City from "@/components/Nav/city"
import Budget from "@/components/Nav/budget"
import Information from "@/components/Nav/information"
import LRheader from "@/components/Nav/LRheader"
Vue.use(Step);
Vue.use(Steps);
Vue.use(Icon)
    //逻辑部分
    export default {
    data() {
        return {
        active: 0,
        center: '个性定制',
        stack:['Period','Prefer','States','Country','City','Budget','Information']
        // url: ["/process/period", "/process/prefer", "/process/states", "/process/country", "/process/city", "/process/budget", "/process/information"]
        };
    },
    created(){
    },
    methods: {
        changeTab(index) {
        //     console.log(index);
            this.active = index;
            // console.log(this.active)
        //     this.$router.push(this.url[index])
        },
        nextPage(){
            this.active++
        }
    },
    mounted:function(){
        this.$eventBus.$on('changenum',val => {
            this.active=val
        })
    },
    components: {
        Period,
        Prefer,
        States,
        Country,
        City,
        Budget,
        Information,
        LRheader
    }
    }
</script>

<style scoped>
/* 样式部分 */
.van-step--horizontal .van-step__title{
    font-size: 50px;
}
.setmargin{
    margin: 50px 0;
}
.step-text-color{
    color: red;
}
.van-step__icon{
    /* width: 125px; */
    font-size: 50px  !important;
}
</style>